<template>
	<view>
		<view class="main" v-if="goodsInfo">
			<view class="banner-back" v-if="goodsInfo.images">
				<swiper class="swiper" circular :autoplay="true" :interval="3000">
					<swiper-item v-for="(image,index) in goodsInfo.images">
						<image class="banner-image" :src="image"></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="item-back">
				<view class="goods-title">{{goodsInfo.title}}</view>
				<view class="flex-center-sb">
					<view class="flex-end">
						<view class="price-text"><text>¥</text>{{goodsInfo.price}}</view>
						<view class="line-price">¥{{goodsInfo.price}}</view>
					</view>
					<image class="collect-image" v-if="goodsInfo.collection==1" src="../../static/shoucang_s.png"
						@click="collectionAction"></image>
					<image class="collect-image" v-else src="../../static/shoucang_n.png" @click="collectionAction">
					</image>
				</view>
				<view class="stock-back">
					<view>库存：{{goodsInfo.stock}}</view>
					<view>销量：{{goodsInfo.sales}}</view>
				</view>
			</view>
			<!-- <view class="item-back">
				<view class="flex-center-sb">
					<view class="left-text">已选</view>
					<view>{{skuInfo.title}}</view>
				</view>
			</view> -->
			<view class="item-back">
				<view class="left-text">商品描述</view>
				<view class="rich-back">
					<rich-text :nodes="repairRichText(goodsInfo.content)" :preview="true"></rich-text>
				</view>
			</view>
		</view>
		<view class="bottomBt">
			<view class="flex-center">
				<view class="bottom-bar collect" @click="collectionAction">
					<image class="bottom-image" v-if="goodsInfo.collection==1" src="../../static/shoucang_s.png">
					</image>
					<image class="bottom-image" v-else src="../../static/shoucang_n.png"></image>
					<view>收藏</view>
				</view>
				<view class="bottom-bar" @click="gocar">
					<image class="bottom-image" src="../../static/gouwuche.png"></image>
					<view>购物车</view>
				</view>
			</view>
			<view class="flex-center">
				<view class="button" @click="addCar">加入购物车</view>
				<view class="button buyBt" @click="buy">立即购买</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "wts-goodsDetail",
		props: {
			goodsInfo: '',
		},
		data() {
			return {
				skuInfo: this.goodsInfo.sku[0]
			}
		},
		watch: {
			goodsInfo(val) {
				this.skuInfo = val.sku[0]
			}
		},
		methods: {
			// 商品收藏
			collectionAction() {
				console.log(this.goodsInfo.collection)
				this.$emit('collectionAction')
			},
			// 前往购物车
			gocar() {
				this.$emit('gocarAction')
			},
			// 添加到购物车
			addCar() {
				this.$emit('addCarAction')
			},
			// 下单
			buy() {
				this.$emit('buyAction')
			},
			repairRichText(html) {
				// 去掉<img>中style /width / height属性
				let newContent = html.replace(/<img[^>]*>/gi, (match) => {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '')
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '')
					match = match.replace(/style\s*=\s*(["'])(?:(?!\1).)*\1/gi, '') // 去除 style=""这样的属性
					return match
				})
				// 修改所有style里的width属性为max-width:100%
				newContent = newContent.replace(/style="[^"]+"/gi, (match) => {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;')
					return match
				})

				// 去掉所有<br/>标签
				newContent = newContent.replace(/<br[^>]*\/>/gi, '')
				// img标签添加style属性：max-width:100%;height:auto
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
				)
				return newContent;
			},
		}
	}
</script>

<style lang="scss">
	.main {
		padding-bottom: 220rpx;
	}

	.banner-back {
		.swiper {
			height: 100vw;
		}

		.banner-image {
			width: 100%;
			height: 100%;
		}
	}

	.item-back {
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.flex-center {
		display: flex;
		align-items: center;
	}

	.flex-end {
		display: flex;
		align-items: flex-end;
	}

	.flex-center-sb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}



	.goods-title {
		font-size: 32rpx;
		font-weight: bold;
		line-height: 44rpx;
		margin-bottom: 10rpx;
	}

	.price-text {
		color: #a20000;
		font-size: 38rpx;
		font-weight: bold;

		text {
			font-size: 28rpx;
		}
	}

	.line-price {
		color: #999;
		font-size: 28rpx;
		margin-left: 5rpx;
		text-decoration: line-through;
	}

	.collect-image {
		width: 42rpx;
		height: 42rpx;
	}

	.stock-back {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		color: #999;
		margin-top: 10rpx;
		font-size: 28rpx;

		view {
			margin-left: 30rpx;
		}
	}

	.left-text {
		font-size: 34rpx;
		font-weight: bold;
		line-height: 34rpx;
	}

	.rich-back {
		margin-top: 20rpx;
	}

	.bottomBt {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		border-top: 1px solid #eee;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.button {
			background: linear-gradient(80deg, #F20100 0%, #FD4E16 100%);
			color: #fff;
			height: 80rpx;
			border-radius: 40rpx;
			width: 216rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 13px;
		}

		.buyBt {
			background: linear-gradient(90deg, #FFA600 0%, #FFBB00 100%);
			margin-left: 30rpx;
		}

		.bottom-bar {
			display: flex;
			flex-direction: column;
			align-items: center;

			.bottom-image {
				width: 40rpx;
				height: 40rpx;
			}

			view {
				font-size: 24rpx;
				color: #666;
				text-align: center;
				margin-top: 5rpx;
			}
		}

		.collect {
			margin-right: 50rpx;
		}
	}
</style>